<template>
    <div class="tabline-box">
        <div class="left" v-if="grade==1||grade==2||grade==3">
            <p v-for="(item,index) in info[nameType]" :key="index" @click="click(item)"
                :class="item==title?'active':''" >{{item}}
            </p>
        </div>
        <div class="right" :style="{width:grade==4||grade==5?'100%':''}">
            <div style="display:flex;justify-content: flex-end;">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane :label="item.name" :name="item.value" v-for="(item,index) in data"
                        :key="item.name"></el-tab-pane>
                </el-tabs>
            </div>
            <EchartsMoreLine class="line" :data="line" yUnit="" :color="['rgba(48, 137, 233,', 'rgba(2, 246, 247,']"
                areaStyleOpcity="0.5" :extraLegend="{  right: 'center' }" :showLabel="true"></EchartsMoreLine>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'Tabline',
        components: {

        },
        props: {
            data: {
                // 返回的数据
                type: Array,
                default: function () {
                    return [];
                },
            },
            grade: {
                type: [String, Number],
                default: 1,
            },
        },
        watch: {
            grade: {
                // 对对象进行深度监听
                handler(nv) {
                    if (nv == 1) {
                        this.nameType = 'a'
                    }
                    if (nv == 2) {
                        this.nameType = 'b'
                    }
                    if (nv == 3) {
                        this.nameType = 'c'
                    }
                },
                immediate: true,
                deep: true,
            },

        },

        data() {
            return {
                title: "行政街区",
                activeName: "a",
                nameType: 'a',//街道、社区、小区
                info: {
                    a: ['振华路街道', '沧口街道', '兴华路街道', '兴城路街道', '李村街道', '虎山路街道', '浮山路街道', '楼山街道', '九水街道', '世园街道'],
                    b: ['福岛路社区', '浮山路社区', '南庄社区', '河南社区', '东李社区', '新河东社区', '百通花宛', '九水路社区', '旭东社区', '福林苑社区'],
                    c: ['福岛小区', '滨河小区', '南庄小区', '台柳路中小区', '河南庄小区'],
                },
                line: {
                    xData: ["超市", "厕所", "公园", "停车场", '充电桩'],
                    yData: [
                        { name: "总数", data: [46, 36, 42, 52, 50] },
                        { name: "已用", data: [9, 12, 9, 2, 23] },
                    ],
                },

            };
        },
        created() { },
        mounted() { },
        methods: {
            handleClick({ label }) {
                this.title = label
                this.initline()
            },
            click(e) {
                this.title = e
                this.initline()
            },
            initline() {
                for (let i in this.line.yData[0].data) {
                    this.$set(this.line.yData[0].data, i, this.$randomNum(41, 50))
                }
                for (let i in this.line.yData[1].data) {
                    this.$set(this.line.yData[1].data, i, this.$randomNum(21, 30))
                }

            },
        },
    };
</script>

<style lang="scss" scoped>
    .tabline-box {
        width: 100%;
        height: 100%;

        .left {
            float: left;
            padding-left: 40px;
            width: 25%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: start;

            p {
                color: #fff;
                margin-bottom: 5px;
                font-size: 16px;
                letter-spacing: 2px;
                cursor: pointer;
            }

            .active {
                color: #00cdf9;

            }
        }

        .right {
            float: right;
            width: 75%;
            height: 100%;

            .line {
                width: 100%;
                height: calc(100% - 40px);
            }
        }
    }
</style>
<style lang="scss">
    .tabline-box {
        .el-tabs__item {
            padding: 0 20px !important;
            color: #fff;
            font-weight: bold;
            font-size: 16px !important;
        }

        .el-tabs__item.is-active {
            color: #00cdf9;
        }
    }
</style>